<template>
  <div>
    <div>
      <!-- href属性绑定 -->
      <a v-bind:href="data" target="_blank">{{ message }}</a>
      <!-- 改变属性 -->
      <button v-on:click="handle">切换1</button>
    </div>
    <!-- 传统做法 -->
    <div class="active">cy</div>
    <!-- vue做法-->
    <div v-bind:class="{active:isActive,error:isError,test:isTest}">cyd</div>
    <!-- 简化做法 -->
    <div v-bind:class="objClass">mmp</div>
    <!-- 默认的class,不会受影响 -->
    <div class="default" v-bind:class="objClass">mmp</div>
    <!-- 控制切换 -->
    <button v-on:click="handle2">切换2</button>
  </div>
</template>

<script>
export default {
  name: "TestVBind",
  data() {
    return {
      data: "http://www.baidu.com",
      message: '百度',
      flag: 1,
      // 样式切换的属性
      isActive: true,
      isError: false,
      isTest: false,
      objClass: {
        active: true,
        error: false,
        test: false,
      }
    }
  },
  methods: {
    handle: function () {
      if (this.flag === 1) {
        this.message = 'qq'
        this.data = 'http://www.qq.com'
        this.flag = 0
      } else {
        this.message = '百度'
        this.data = 'http://www.baidu.com'
        this.flag = 1
      }
    },
    // 样式切换的方法
    handle2: function () {
      this.isActive = !this.isActive;
      this.isError = !this.isError;
      this.isTest = !this.isTest;
      this.objClass.active = !this.objClass.active;
      this.objClass.error = !this.objClass.error;
      this.objClass.test = !this.objClass.test;
    }
  }
}
</script>

<style scoped>
/* 先定义好样式 */
.active {
  border: 1px solid red;
  height: 100px;
  width: 100px;
}

.error {
  border: 1px solid orange;
  height: 200px;
  width: 200px;
}

.test {
  color: blue;
}

.default {
  font-size: 26px;
}
</style>
